<template>
	<v-chart class="chart" :option="chartOption" :style="size" />
</template>

<script>
	import {
		use
	} from 'echarts/core';
	import {
		CanvasRenderer
	} from 'echarts/renderers';
	import {
		PieChart
	} from 'echarts/charts';
	import {
		TitleComponent,
		TooltipComponent,
		LegendComponent,
	} from 'echarts/components';
	import VChart, {
		THEME_KEY
	} from 'vue-echarts';
	import {
		ref,
		defineComponent
	} from 'vue';

	use([
		CanvasRenderer,
		PieChart,
		TitleComponent,
		TooltipComponent,
		LegendComponent,
	]);

	// Vue2 需要手动注册组件
	export default {
		name: 'ChartsComponent',
		components: {
			VChart
		},
		props: {
			size: {
				type: String,
				default: 'width:250px;height:250px'
			},
			options: {
				type: Object
			}
		},
		provide: {
			[THEME_KEY]: 'dark'
		},
		data() {
			return {
				chartOption: {
					...this.options
				}

			}
		},
		watch: {
			// 监听props变化更新数据
			options: {
				deep: true,
				handler(newVal) {
					this.chartOption = {
						...newVal
					}
				}
			}
		},
		mounted() {
			// Vue2 生命周期钩子
			console.log('组件已挂载')
		}
	}
</script>

<style scoped>
	.chart {
		height: 100vh;
	}
</style>